<ion-header>
    <ion-toolbar color="light">
        <ion-buttons start >
            <button ion-button icon-only navPop>
                <ion-icon name="arrow-back" ></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>{{ 'post.Post' | translate }}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
        <div class="content-form">
            <div class="hc-form-item">
                <ion-multi-picker class="hc-select" [(ngModel)] = "info.cate" item-content [multiPickerColumns]="dependentColumns" doneText="OK"></ion-multi-picker>
                <!-- <ion-select class="hc-select" [(ngModel)]="info.cate" placeholder="Service Type">
                    <ion-option value="Photo service">Photo service</ion-option>
                    <ion-option value="Survey Service">Survey Service</ion-option>
                    <ion-option value="Survey Service">Survey Service</ion-option>
                    <ion-option value="Survey Service">Survey Service</ion-option>
                    <ion-option value="Survey Service">Survey Service</ion-option>
                    <ion-option value="Survey Service">Survey Service</ion-option>
                </ion-select> -->
            </div>
            <ion-item-divider class="hc-ion-item " color="light" (click)="alert_sign=true">
                <ion-label stacked>{{ 'post.Address' | translate }}<font style="color:red">*</font></ion-label>
                <ion-textarea placeholder="Belsize Road, London NW6" [(ngModel)]="info.address" readonly="true" (focus)="alert_sign=true"> </ion-textarea>
            </ion-item-divider>
            
            <div class="hc-form-item noborder">
                <ion-label color="main">{{ 'post.Price' | translate }}<font style="color:red">*</font></ion-label>
                <div class="hc-input-container-2">
                    <div class="type-radio-group">
                            <label class="input-radio mr" for="other_unit">
                                <input type="radio" name="other_unit" value="1" [(ngModel)]="info.price_unit">
                                <span><b></b></span>
                                <font>£</font>
                            </label>
                            <label class="input-radio mr" for="other_unit">
                                <input type="radio" name="other_unit" value="3" [(ngModel)]="info.price_unit">
                                <span><b></b></span>
                                <font>$</font>
                            </label>
                            <label class="input-radio mr" for="other_unit">
                                <input type="radio" name="other_unit" value="2" [(ngModel)]="info.price_unit">
                                <span><b></b></span>
                                <font>€</font>
                            </label>
                            <label class="input-radio mr" for="other_unit">
                                <input type="radio" name="other_unit" value="4" [(ngModel)]="info.price_unit">
                                <span><b></b></span>
                                <font>¥</font>
                            </label>
                    </div>
                    <input type="text" [(ngModel)]="info.price">
                </div>
            </div>
            <div class="hc-form-item noborder">
                <ion-label color="main">{{ 'post.avd' | translate }}<font style="color:red">*</font></ion-label>
                <div class="hc-input-container-2">
                    <ion-datetime displayFormat="YYYY-MM-DD" placeholader="Start day" [(ngModel)]="info.service_start" min="2018" max="2040"></ion-datetime>
                    <span class="line"></span>
                    <ion-datetime displayFormat="YYYY-MM-DD" placeholader="End day" [(ngModel)]="info.service_end" [min]="info.service_start || 2018"  max="2040"></ion-datetime>
                </div>
            </div>
    </div>
    <div class="content-form">
        <ion-item class="hc-ion-select trInput">
                    
            <ion-label color="main">{{ 'Contact.Name' | translate }}<font style="color:red">*</font></ion-label>
            <ion-input type="text" [(ngModel)]="info.owner_name"></ion-input>
        </ion-item>
        <ion-item class="hc-ion-select trInput">
            <ion-label color="main">{{ 'Contact.Email' | translate }}<font style="color:red">*</font></ion-label>
            <ion-input type="text" [(ngModel)]="info.owner_email"></ion-input>
        </ion-item>
        <ion-item class="hc-ion-select trInput">
            <ion-label color="main">{{ 'post.Tel' | translate }}<font style="color:red">*</font></ion-label>
            <ion-input type="text" [(ngModel)]="info.owner_tel"></ion-input>
        </ion-item>
        <ion-item class="hc-ion-select">
            <ion-label color="main">{{ 'post.sp' | translate }}</ion-label>
            <ion-toggle  [(ngModel)]="info.share"></ion-toggle>
        </ion-item>
        <ion-item class="hc-ion-select">
            <ion-label color="main">{{ 'post.aoauto' | translate }}</ion-label>
            <ion-toggle  [(ngModel)]="info.autoorder"></ion-toggle>
        </ion-item>
        <ion-item-divider class="hc-ion-item " color="light">
            <ion-label stacked>{{ 'post.Description' | translate }}</ion-label>
            <ion-textarea placeholder="" [(ngModel)]="info.description"></ion-textarea>
        </ion-item-divider>
    </div>
    <div class="premium-listing">
        <div class="type-radio-group">
            <label class="input-radio mr" for="isTop">
                <input type="checkbox" id="isTop" name="isTop" value="1" [(ngModel)]="info.top_status">
                <span><b></b></span>
                <font style="font-size:1.4rem;">&nbsp;&nbsp;{{ 'post.Uplist' | translate }}(£{{pre_price}}/day)</font>
            </label>
        </div> 
        <div class="premium-listing-date">
            <label for="">{{ 'filter.sd' | translate }}</label>
            <span>
                <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="info.top_starttime" min="2018" max="2040"></ion-datetime>
                <font class="iconfont icon-post_calendar"></font>
            </span>
        </div>
        <div class="premium-listing-date">
            <label for="">{{ 'filter.ed' | translate }}</label>
            <span>
                <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="info.top_endtime" [min]="info.top_starttime || 2017"  max="2040"></ion-datetime>
                <font class="iconfont icon-post_calendar"></font>
            </span>
        </div>
        <p>{{ 'post.td' | translate }}: 0,{{ 'post.Cost' | translate }}: 0</p>
    </div>
    <button class="postBtn" ion-button (click)="submit()">{{ 'post.Post' | translate }}</button>
    <div class="footer-img img-container">
        <img [src]="advertising" alt="">
    </div>
</ion-content>
<div class="alert-cell" [class.active]="alert_sign">
    <div style="position: relative;">
        <div class="input-container">
            <div class="input">
                <input type="text" readonly [(ngModel)]="info.address">
                <ul *ngIf="addresslist.length>0">
                    <li *ngFor="let item of addresslist" (click)="info.address=item.vicinity?item.vicinity+item.name:item.name;info.latitude=item.geometry.location.lat;info.longitude=item.geometry.location.lng;addresslist=[];">{{item.vicinity+item.name}}</li>
                </ul>
            </div>
            <button type="button" (click)="alert_sign=false">Ok</button>
        </div>
    </div>
    
    <div id="map" #map></div>
</div>